<!--模块管理-->
<!--之前的接口`http://139.9.249.149:8081/judge/module/parent?parenID=0`,-->
<template>
  <div style="padding: 15px">
    <el-row :gutter="20">
      <el-col :span="4" style="height: 100vh; overflow-y: scroll">
        <h3 style="margin: 0; color: #606266;">请选择模块</h3>
        <el-button
          size="mini"
          style="margin: 10px 0;"
          plain
          type="success"
          @click="openDig(null)"
        >新增</el-button>
        <el-button
          size="mini"
          style="margin: 10px 0;"
          plain
          type="primary"
          @click="fetchTableData()"
        >主页</el-button>
        <el-tree
          ref="tree"
          :data="treeData"
          :props="defaultProps"
          accordion
          @node-click="chooseModule($event, 1)"
        />
      </el-col>
      <el-col :span="20">
        <el-row>
          <el-col :span="21">
            <!-- <el-form :inline="true">
              <el-form-item>
                <el-input
                  v-model="moduleName"
                  clearable
                  placeholder="模块名称"
                  @change="fetchTableData"
                >
                  <template slot="prepend">模块名称</template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button plain type="info" @click="fetchTableData">查询</el-button>
              </el-form-item>
            </el-form>-->
          </el-col>
          <el-col :span="24" style="margin-top: 1.6em">
            <el-table stripe border v-loading="loading" :data="tableData">
              <el-table-column
                v-for="(item, index) in tableCols"
                :key="index"
                :prop="item.colKey"
                :label="item.label"
                :min-width="item['min-width']"
                :align="item.align"
              ></el-table-column>
              <el-table-column label="状态" min-width="100" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.modulestatus === '1' ? '启用' : '禁用' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" min-width="260" fixed="right" align="center">
                <template slot-scope="scope">
                  <el-button plain type="primary" @click="openDig(scope.row)">编辑</el-button>
                  <el-button plain type="danger" @click="delModule(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- <template slot="sort" slot-scope="scope">
                <i
                  class="sort-icon el-icon-sort-up"
                  @click="handleSort(true, scope.row, scope.$index)"
                />
                &nbsp;
                <i
                  class="sort-icon el-icon-sort-down"
                  @click="handleSort(false, scope.row, scope.$index)"
                />
            </template>-->
          </el-col>
        </el-row>
        <!-- <el-row>
          <pagination
            :total-count="totalCount"
            @fetchAllData="((size, page) => moduleData ? chooseModule(this.moduleData, page, size) : fetchTableData(moduleName, page, size))"
          />
        </el-row>-->
      </el-col>
    </el-row>
    <module-dialog
      :prop-form="propForm"
      :auth="moduleoOptions"
      :visible="visible"
      :title="dialogTitle"
      @refreshTable="onRefresh"
      @closeDialog="(() => {visible = false;propForm = {}})"
    />
  </div>
</template>

<script>
// import pagination from '@/components/basecomponents/pagination/pagination'
import moduleDialog from "./components/moduleOptionDialog";
import rules from "./components/formRules.js";

export default {
  name: "moduleManage",
  components: {
    moduleDialog
  },
  data() {
    return {
      rules,
      loading: false,
      moduleName1: "",
      moduleId1: "",
      tableOptions: {
        stripe: true
      },
      tableCols: [
        {
          label: "模块名称",
          colKey: "modulename",
          align: "center",
          "min-width": "150"
        },
        {
          label: "链接地址",
          colKey: "moduleurl",
          align: "center",
          "min-width": "150"
        },
        {
          label: "父级模块",
          colKey: "parentmoduleid",
          align: "center",
          "min-width": "150"
        }
        // {
        //   label: "排序",
        //   align: "center",
        //   width: "100",
        //   custom: true,
        //   slotName: "sort"
        // },
      ],
      totalCount: 0,
      currentPage: 1,
      currentSize: 10,
      treeData: [],
      dialogTitle: "",
      moduleName: "",
      tableData: [],
      moduleData: null,
      visible: false,
      defaultProps: {
        children: "child",
        label: "moduleName"
      },
      nameDialog: false,
      propForm: null,
      moduleoOptions: []
    };
  },
  created() {
    let arr = [this.fetchTableData(), this.fetchTree()];
    Promise.all(arr);
    // this.fetchTree();
  },
  methods: {
    onRefresh(id) {
      if (this.moduleData) {
        this.chooseModule({ moduleID: id });
      } else this.fetchTableData();
      this.fetchTree();
    },
    openDig1(data) {
      // console.log(data);
      this.nameDialog = true;
      this.moduleName1 = data.CuitMoon_ModuleName;
      this.moduleId1 = data.moduleID;
    },
    async openDig(data) {
      // console.log(data);
      data ? (this.dialogTitle = "编辑模块") : (this.dialogTitle = "添加模块");

      await this.$api
        .get(
          `http://123.57.71.124:8081/module/parent?parenID=0`,
          {},
          { autoAlert: false, returnAll: true }
        )
        .then(res => {
          this.moduleoOptions = res.data.msg;
          this.propForm = data;
          this.visible = true;
        });
    },
    // 排序
    // async handleSort(isUp, row, index) {
    //   // console.log(row);
    //   try {
    //     let res = null;
    //     // 是否升序
    //     if (isUp) {
    //       if (index === 0) {
    //         return;
    //       }
    //       this.loading = true;
    //       const thisid = row.moduleID;
    //       const thisroleordernum = "" + row.CuitMoon_ModuleOrderNum;
    //       const thatid = this.tableData[index - 1].moduleID;
    //       const thatroleordernum =
    //         "" + this.tableData[index - 1].CuitMoon_ModuleOrderNum;

    //       res = await module.upOrder({
    //         thisroleordernum,
    //         thisid,
    //         thatroleordernum,
    //         thatid
    //       });
    //       // 是否降序
    //     } else {
    //       if (!this.tableData[index + 1]) {
    //         return;
    //       }
    //       this.loading = true;
    //       const thisid = row.moduleID;
    //       const thisroleordernum = "" + row.CuitMoon_ModuleOrderNum;
    //       const thatid = this.tableData[index + 1].moduleID;
    //       const thatroleordernum =
    //         "" + this.tableData[index + 1].CuitMoon_ModuleOrderNum;

    //       res = await module.downOrder({
    //         thisroleordernum,
    //         thisid,
    //         thatroleordernum,
    //         thatid
    //       });
    //     }
    //     this.$openMsg(res);
    //     if (+res.data.code === 200) {
    //       this.loading = false;
    //       // 重新获取输和刷新表格
    //       this.fetchTree();
    //       // 重新获取数据后让节点高亮
    //       try {
    //         this.$refs.tree.setCurrentKey(row.moduleID);
    //       } catch (error) {
    //         console.log(error);
    //       }
    //     } else {
    //       this.fetchWrong(res.data.data.msg || "操作失败，请稍后重试");
    //     }
    //   } catch (err) {
    //     console.log(err);
    //     // this.$message.error("操作失败，请重试");
    //   }
    // },

    async fetchTableData() {
      try {
        this.loading = true;
        await this.$api
          .get(
            `http://123.57.71.124:8081/module/parent?parenID=0`,
            {},
            { autoAlert: false, returnAll: true }
          )
          .then(res => {
            this.tableData = res.data.msg;
            this.moduleoOptions = res.data.msg;
          });
      } catch (e) {
        console.log(e);
      } finally {
        this.loading = false;
      }
    },
    async fetchTree() {
      try {
        await this.$api
          .get(
            `http://123.57.71.124:8081/module`,
            {},
            { autoAlert: false, returnAll: true }
          )
          .then(res => {
            this.treeData = res.data.msg;
          });
      } catch (e) {
        console.log(e);
      }
    },
    async delModule(data) {
      try {
        this.$confirm("此操作将永久删除该模块, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(async () => {
          const res = await this.$api.delete(
            `http://139.9.249.149:8081/judge/module?id=${data.moduleid}`
          );
          this.chooseModule({ moduleID: data.parentmoduleid }, 1);
          this.fetchTree();
        });
      } catch (e) {
        console.log(e);
      }
    },
    async chooseModule(data) {
      try {
        this.loading = true;
        this.moduleData = data;
        //console.log(this.moduleData);
        this.moduleData.moduleID !== data.moduleID
          ? (this.moduleData = data)
          : "";
        let res = await this.$api.get(
          `http://123.57.71.124:8081/module/parent?parenID=${data.moduleID}`,
          {},
          { autoAlert: false, returnAll: true }
        );

        this.tableData = res.data.msg;
        this.totalCount = res.data.msg;
      } catch (e) {
        console.log(e);
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style scoped>
.setting td {
  height: 20px;
}
</style>
